import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

class FileBlot extends BlockEmbed {
  static blotName = 'file';
  static tagName = 'span';
  static className = 'file-container';

  static create(value): any {
    const node = super.create(value);
    const { url, name, size } = value;
    console.log('value:', value);

    // 将 delta 数据中的 insert 值存储在 dom 中，以便 static value 中能拿到
    node.setAttribute('data-url', url);
    node.setAttribute('data-name', name);
    node.setAttribute('data-size', size);
    node.setAttribute('contenteditable', 'false');

    // const fileIcon = document.createElement('span');
    // fileIcon.classList.add('file-icon');

    const fileIcon = document.createElement('img');
    fileIcon.setAttribute('src', 'assets/icons/file-blue.svg');
    fileIcon.setAttribute('width', '18px');
    fileIcon.setAttribute('height', '18px');

    const fileName = document.createElement('span');
    fileName.classList.add('file-name');
    fileName.textContent = name;

    const fileSize = document.createElement('span');
    fileSize.classList.add('file-size');
    fileSize.textContent = size;

    node.appendChild(fileIcon);
    node.appendChild(fileName);
    node.appendChild(fileSize);

    node.addEventListener('click', () => {
      node.classList.toggle('selected');
  });
    return node;
  }

  // static value(node): any {
  //     // 4.返回 insert 的值
  //     // console.log('static value');
  //     return node.getAttribute('data-url');
  // }

  static formats(node): any {
    // 5.返回 attributes 中的值
    // console.log('static formats');
    return {
      url: node.getAttribute('data-url'),
      name: node.getAttribute('data-name'),
      size: node.getAttribute('data-size')
    };
  }
}

export default FileBlot;
